<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/datepicker.css">
    <style>
      .p20{
        padding:20px;
      }
      .mt20{
        margin-top:20px;
      }
      .mt40{
        margin-top:40px;
      }
      .mt10{
        margin-top:10px;
      }
      .hide{
        display: none;
      }
      body{
        height:1000px;
      }
      .c999{
        color:#999;
        font-size:12px;
      }
      
    </style>
</head>
<body >
    <div class="p20">
      <div class="mt40">
        <div>（❤️新增）时分秒单个选择，最小值：04:23:11 <span class="c999">(HH:mm:ss 单个)</span></div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-time mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input type="text" autocomplete="off" name="" placeholder="选择时间" class=" c-datepicker-data-input only-time"
            value="">
        </div>
      </div>
      <div class="mt40">
        <div>（❤️新增）时分秒范围选择，最小值：04:23:11 ，最大值：20:59:59 <span class="c999">(HH:mm:ss 范围)</span></div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-time-range mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input placeholder="开始时间" name="" class="c-datepicker-data-input only-time" value="">
          <span class="c-datepicker-range-separator">-</span>
          <input placeholder="结束时间" name="" class="c-datepicker-data-input only-time" value="">
        </div>
      </div>
      <div class="mt40">
        <div>（❤️新增）英文版。年月日时分秒单个选择，最小值：2018-01-01 04:00:00 ，最大值：2019-04-29 20:59:59 <span class="c999">(YYYY-MM-DD HH:mm:ss 单个)</span>
        </div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-en mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input type="text" autocomplete="off" name="" placeholder="choose date" class=" c-datepicker-data-input">
        </div>
      </div>
      <div class="mt40">
        <div>年月日单个选择，无最大最小值 <span class="c999">(YYYY-MM-DD 单个)</span></div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
        </div>
      </div>
      <div class="mt40">
        <div>年月日范围选择，无最大最小值 <span class="c999">(YYYY-MM-DD 范围)</span></div>
        <div class="c-datepicker-date-editor  J-datepicker-range-day mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
          <span class="c-datepicker-range-separator">-</span>
          <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
        </div>
      </div>

      <div class="mt40">
        <div>年月日范围选择，无最大最小值 <span class="c999">(YYYY-MM-DD 范围)</span></div>
        <div class="c-datepicker-date-editor J-datepicker-range-day mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input placeholder="开始日期" name="" class="c-datepicker-data-input only-date" value="">
          <span class="c-datepicker-range-separator">-</span>
          <input placeholder="结束日期" name="" class="c-datepicker-data-input only-date" value="">
        </div>
      </div>

      <div class="mt40">
        <div>年月日时分秒单个选择，最小值：2018-01-01 04:00:00 ，最大值：2019-04-29 20:59:59 <span class="c999">(YYYY-MM-DD HH:mm:ss 单个)</span></div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input">
        </div>
      </div>
      <div class="mt40">
        <div>年月日时分秒范围选择，最小值：2018-01-01 06:00:00 ，最大值：2019-04-29 20:59:59 <span class="c999">(YYYY-MM-DD HH:mm:ss 范围)</span></div>
        <div>打开控制台，观察关闭的hide类型</div>
        <div class="c-datepicker-date-editor J-datepicker-range mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="2018-01-01 04:00:00">
          <span class="c-datepicker-range-separator">-</span>
          <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="2018-03-01 04:00:00">
        </div>
      </div>

      <div class="mt40">
        <div>年月日时分秒范围选择，开始结束限制在一个自然月内 <span class="c999">(YYYY-MM-DD HH:mm:ss 范围)</span></div>
        <div class="c-datepicker-date-editor J-datepicker-range-betweenMonth mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
          <span class="c-datepicker-range-separator">-</span>
          <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
        </div>
      </div>

      <div class="mt40">
        <div>年月日时分秒范围选择，开始结束限制在30天内 <span class="c999">(YYYY-MM-DD HH:mm:ss 范围)</span></div>
        <div class="c-datepicker-date-editor J-datepicker-range-between30 mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
          <span class="c-datepicker-range-separator">-</span>
          <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
        </div>
      </div>

      <div class="mt40">
        <div>年月日十分单个选择 <span class="c999">(YYYY-MM-DD HH:mm 单个)</span></div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepickerTime-single mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input" value="">
        </div>
      </div>

      <div class="mt40">
        <div>年月日十分范围选择 <span class="c999">(YYYY-MM-DD HH:mm 范围)</span></div>
        <div class="c-datepicker-date-editor J-datepickerTime-range mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input placeholder="开始日期" name="" class="c-datepicker-data-input" value="">
          <span class="c-datepicker-range-separator">-</span>
          <input placeholder="结束日期" name="" class="c-datepicker-data-input" value="">
        </div>
      </div>

      <div class="mt40">
        <div>年月单个选择，最大值：2018-01，最小值：2019-04 <span class="c999">(YYYY-MM 单个)</span></div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-yearMonthPicker-single mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input type="text" autocomplete="off" name="" placeholder="选择年月" class=" c-datepicker-data-input" value="">
        </div>
      </div>

      <div class="mt40">
        <div>年单个选择，最大值：2020，最小值：2018 <span class="c999">(YYYY 单个)</span></div>
        <div class="c-datepicker-date-editor c-datepicker-single-editor J-yearPicker-single mt10">
          <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
          <input type="text" autocomplete="off" name="" placeholder="选择年份" class=" c-datepicker-data-input" value="">
        </div>
      </div>
      <div class="c-datepicker-box mt40" style="height:300px;overflow: auto; background: #dfeeff;padding: 20px;">
        父元素滚动，日期选择框跟随input滚动例子<br>
        父元素div.c-datepicker-box，样式：height:300px;overflow: auto; <br><br>
        占位 <br><br>
        占位 <br><br>
        <div class="mt40">
          <div>年月日单个选择，测试父元素滚动用</div>
          <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
            <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
            <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
          </div>
        </div>
        <div class="mt20">
          <div>年月日单个选择，测试父元素滚动用</div>
          <div class="c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day mt10">
            <i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
            <input type="text" autocomplete="off" name="" placeholder="选择日期" class=" c-datepicker-data-input only-date" value="">
          </div>
        </div>
        占位 <br><br>
        占位 <br><br>
        占位 <br><br>
        占位 <br><br>
        占位 <br><br>
        占位 <br><br>
      </div>
      
       
    </div>
    <!-- <i class="c-datepicker-input__icon c-datepicker-range__close-icon"></i> -->
    <script src="js/plugins/jquery.js"></script>
    <script src="js/plugins/moment.min.js"></script>
    <!-- <script src="js/datapicker-separate/api.js"></script>
    <script src="js/datapicker-separate/year.js"></script>
    <script src="js/datapicker-separate/month.js"></script>
    <script src="js/datapicker-separate/day.js"></script>
    <script src="js/datapicker-separate/time.js"></script>
    <script src="js/datapicker-separate/time-only-time.js"></script>
    <script src="js/datapicker-separate/datepicker.js"></script>
    <script src="js/datapicker-separate/datepicker-only-time.js"></script> -->

    <script src="js/datepicker.all.js"></script>
    <!-- <script src="js/datepicker.all.min.js"></script> -->

    <script src="js/datepicker.en.js"></script>
    <script type="text/javascript">
     
      $(function(){
        //选择时分秒
        $('.J-datepicker-time').datePicker({
          format: 'HH:mm:ss',
          min: '04:23:11'
        });
        $('.J-datepicker-time-range').datePicker({
          format: 'HH:mm:ss',
          isRange: true,
          min: '04:23:11',
          max: '20:59:59'
        });
        //时分秒年月日单个
        $('.J-datepicker-en').datePicker({
          hasShortcut: true,
          min: '2018-01-01 04:00:00',
          max: '2019-04-29 20:59:59',
          language: 'en',
          shortcutOptions: [{
            name: 'today',
            day: '0'
          }, {
            name: 'yesterday',
            day: '-1',
            time: '00:00:00'
          }, {
            name: 'last week',
            day: '-7'
          }],
          hide: function () {
            console.info(this)
          }
        });
        var DATAPICKERAPI = {
          // 默认input显示当前月,自己获取后填充
          activeMonthRange: function () {
            return {
              begin: moment().set({ 'date': 1, 'hour': 0, 'minute': 0, 'second': 0 }).format('YYYY-MM-DD HH:mm:ss'),
              end: moment().set({ 'hour': 23, 'minute': 59, 'second': 59 }).format('YYYY-MM-DD HH:mm:ss')
            }
          },
          shortcutMonth: function () {
            // 当月
            var nowDay = moment().get('date');
            var prevMonthFirstDay = moment().subtract(1, 'months').set({ 'date': 1 });
            var prevMonthDay = moment().diff(prevMonthFirstDay, 'days');
            return {
              now: '-' + nowDay + ',0',
              prev: '-' + prevMonthDay + ',-' + nowDay
            }
          },
          // 近n小时计算返回
          shortcutPrevHours: function (hour) {
            var nowDay = moment().get('date');
            var prevHours = moment().subtract(hour, 'hours');
            var prevDate=prevHours.get('date')- nowDay;
            var nowTime=moment().format('HH:mm:ss');
            var prevTime = prevHours.format('HH:mm:ss');
            return {
              day: prevDate + ',0',
              time: prevTime+',' + nowTime,
              name: '近'+ hour+'小时'
            }
          },
          // 注意为函数：快捷选项option:只能同一个月份内的
          rangeMonthShortcutOption1: function () {
            var result = DATAPICKERAPI.shortcutMonth();
            // 近18小时
            var resultTime= DATAPICKERAPI.shortcutPrevHours(18);
            return [{
              name: '昨天',
              day: '-1,-1',
              time: '00:00:00,23:59:59'
            }, {
              name: '这一月',
              day: result.now,
              time: '00:00:00,'
            }, {
              name: '上一月',
              day: result.prev,
              time: '00:00:00,23:59:59'
            }, {
              name: resultTime.name,
              day: resultTime.day,
              time: resultTime.time
            }];
          },
          // 快捷选项option
          rangeShortcutOption1: [{
            name: '最近一周',
            day: '-7,0'
          }, {
            name: '最近一个月',
            day: '-30,0'
          }, {
            name: '最近三个月',
            day: '-90, 0'
          }],
          singleShortcutOptions1: [{
            name: '今天',
            day: '0',
            time: '00:00:00'
          }, {
            name: '昨天',
            day: '-1',
            time: '00:00:00'
          }, {
            name: '一周前',
            day: '-7'
          }]
        };
          //时分秒年月日单个
          $('.J-datepicker').datePicker({
            hasShortcut:true,
            min:'2018-01-01 04:00:00',
            max:'2019-04-29 20:59:59',
            shortcutOptions:[{
              name: '今天',
              day: '0'
            }, {
              name: '昨天',
              day: '-1',
              time: '00:00:00'
            }, {
              name: '一周前',
              day: '-7'
            }],
            hide:function(){
              console.info(this)
            }
          });
          
          //年月日单个
          $('.J-datepicker-day').datePicker({
            hasShortcut: true,
            format:'YYYY-MM-DD',
            shortcutOptions: [{
              name: '今天',
              day: '0'
            }, {
              name: '昨天',
              day: '-1'
            }, {
              name: '一周前',
              day: '-7'
            }]
          });
          
          //年月日范围
          $('.J-datepicker-range-day').datePicker({
            hasShortcut: true,
            format: 'YYYY-MM-DD',
            isRange: true,
            shortcutOptions: DATAPICKERAPI.rangeShortcutOption1
          });

          //十分年月日单个
          $('.J-datepickerTime-single').datePicker({
            format: 'YYYY-MM-DD HH:mm'
          });
          
          //十分年月日范围
          $('.J-datepickerTime-range').datePicker({
            format: 'YYYY-MM-DD HH:mm',
            isRange: true
          });
          
          //时分秒年月日范围，包含最大最小值
          $('.J-datepicker-range').datePicker({
            hasShortcut: true,
            min: '2018-01-01 06:00:00',
            max: '2019-04-29 20:59:59',
            isRange: true,
            shortcutOptions: [{
              name: '昨天',
              day: '-1,-1',
              time: '00:00:00,23:59:59'
            },{
              name: '最近一周',
              day: '-7,0',
              time:'00:00:00,'
            }, {
              name: '最近一个月',
              day: '-30,0',
              time: '00:00:00,'
            }, {
              name: '最近三个月',
              day: '-90, 0',
              time: '00:00:00,'
            }],
            hide: function (type) {
              console.info(this.$input.eq(0).val(), this.$input.eq(1).val());
              console.info('类型：',type)
            }
          });
          //时分秒年月日范围，限制只能选择同一月，比如2018-10-01到2018-10-30
          $('.J-datepicker-range-betweenMonth').datePicker({
            isRange: true,
            between:'month',
            hasShortcut: true,
            shortcutOptions: DATAPICKERAPI.rangeMonthShortcutOption1()
          });
          
          //时分秒年月日范围，限制开始结束相隔天数小于30天
          $('.J-datepicker-range-between30').datePicker({
            isRange: true,
            between: 30
          });
          
          //年月单个
          $('.J-yearMonthPicker-single').datePicker({
            format: 'YYYY-MM',
            min: '2018-01',
            max: '2019-04',
            hide: function (type) {
              console.info(this.$input.eq(0).val());
            }
          });
          
          //选择年
          $('.J-yearPicker-single').datePicker({
            format: 'YYYY',
            min: '2018',
            max: '2020'
          });
          
          
      });
    </script>
</body>
</html>
